<template>
  <div>
    <div class="people-container tag-container">
      <el-button type="primary" plain size="mini" icon="el-icon-view" @click="showUsers" v-if="userList.usercodes.length > 0 || userList.deptcodes.length > 0 || userList.sharecodes.length > 0 || userList.roleids.length > 0 || userList.teamids.length > 0">查看</el-button>
      <slot name="button"></slot>
      <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="openMulitUser" v-if="!disabled">添加</el-button>
      <el-tag :key="'user-' + code" type="info" size="mini" v-for="(code, index) in userList.usercodes" :closable="!disabled" :disable-transitions="false" @close="removeUser('user', index)">
        {{ userList.usernames[index] }}
      </el-tag>
      <el-tag :key="'share-' + code" type="info" size="mini" v-for="(code, index) in userList.sharecodes" :closable="!disabled" :disable-transitions="false" @close="removeUser('share', index)">
        {{ userList.sharenames[index] }}
      </el-tag>
      <el-tag :key="'dept-' + code" type="warning" size="mini" v-for="(code, index) in userList.deptcodes" :closable="!disabled" :disable-transitions="false" @close="removeUser('dept', index)">
        {{ "部门:" + userList.deptnames[index] }}
      </el-tag>
      <el-tag :key="'team-' + id" type="warning" size="mini" v-for="(id, index) in userList.teamids" :closable="!disabled" :disable-transitions="false" @close="removeUser('team', index)">
        {{ "团队:" + userList.teamnames[index] }}
      </el-tag>
      <el-tag :key="'role-' + id" type="warning" size="mini" v-for="(id, index) in userList.roleids" :closable="!disabled" :disable-transitions="false" @close="removeUser('role', index)">
        {{ "角色:" + userList.rolenames[index] }}
      </el-tag>
    </div>
    <el-dialog :visible.sync="visible" v-dialogDrag title="人员选择" :close-on-click-modal="false" class="tl-dialog" width="500px" :append-to-body="true" :modal-append-to-body="true" @open="open" @close="close">
      <el-form class="tl-form" ref="form" :model="model" size="small" label-width="90px">
        <el-row v-if="displayShare">
          <el-col :span="24">
            <el-form-item label="按共享人选">
              <el-select v-model="shareCodeList" multiple placeholder="请选择">
                <el-option v-for="item in shareList" :key="item.sourceusercodes" :label="item.sourceusernames" :value="item.sourceusercodes"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="displayMulit">
          <el-col :span="24">
            <el-form-item label="按人员选择">
              <tl-ref-user ref="refUser" @close="console.log('close')" v-model="model.usercodes" :initDisplayData.sync="model.usernames" dataType="code" :singleSelect="false" :externalQueryParam="{ qry_whereSql: 'EXTENDFIELD1 IS NOT NULL AND ENABLED = 1', qry_nodimission: '0' }">
                <template v-slot>
                  <el-input v-model="model.usernames" :readonly="true" :disabled="true" class="tl-ref-selector" >
                    <el-button slot="append" icon="el-icon-search" @click="openRefDialog" ></el-button>
                  </el-input>
                </template>
              </tl-ref-user>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="displayMulit">
          <el-col :span="24">
            <el-form-item label="按部门选择">
              <tl-ref-dept v-model="model.deptcodes" :initDisplayData.sync="model.deptnames" nameType="fullname" dataType="code" :singleSelect="false"></tl-ref-dept>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="displayMulit">
          <el-col :span="24">
            <el-form-item label="按团队选择">
              <tl-ref-list v-model="model.teamids" :initDisplayData.sync="model.teamnames" refTitle="选择团队" :queryDataUrl="url.queryTeamList" :singleSelect="false"></tl-ref-list>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="displayMulit">
          <el-col :span="24">
            <el-form-item label="按角色选择">
              <tl-ref-role v-model="model.roleids" :initDisplayData.sync="model.rolenames" dataType="id" :singleSelect="false"></tl-ref-role>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="doCancelEdit">取消</el-button>
        <el-button type="primary" @click="doSubmitEdit">确认</el-button>
      </div>
    </el-dialog>
    <tl-user-list ref="usersRef"></tl-user-list>
  </div>
</template>

<script>
/** mixins */
/** 子组件 */
import tlUserList from "./userList"
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from "@tapui/utils/http"
/** VUE配置 */
export default {
  name: "TlMulitUserSelect",
  components: { tlUserList },
  data() {
    return {
      url: {
        queryTeamList: "base/teamInfo/list", // 查询团队
        queryShareUser: "/base/permissionManage/querySharers" // 查询共享人
      },
      visible: false,
      model: {
        usernames: "",
        usercodes: "",
        deptnames: "",
        deptcodes: "",
        teamids: "",
        teamnames: "",
        roleids: "",
        rolenames: "",
        sharecodes: "",
        sharenames: ""
      },
      shareCodeList: [],
      shareList: [],
      userList: {}
    }
  },
  props: {
    value: {
      type: Object,
      default: function() {
        return {
          usernames: "",
          usercodes: "",
          deptnames: "",
          deptcodes: "",
          teamids: "",
          teamnames: "",
          roleids: "",
          rolenames: "",
          sharecodes: "",
          sharenames: ""
        }
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    displayMulit: {
      type: Boolean,
      default: true
    },
    displayShare: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    open() {
      // 页面加载完毕执行
      this.model = JSON.parse(JSON.stringify(this.value))
      // 格式化userlist数据
      this.formatUserList()
      if (this.displayShare) {
        this.shareCodeList = []
        if (this.model.sharecodes) {
          this.shareCodeList = this.model.sharecodes.split(",")
        }
        getAction(this.url.queryShareUser, {
          qry_usercode: this.$store.getters.user.code
        }).then(res => {
          if (res.success) {
            this.shareList = res.result
          }
        })
      }
    },
    /** 格式化userlist数据 */
    formatUserList() {
      this.userList = {
        usernames: this.model.usernames.split(",").filter(item => item !== ""),
        usercodes: this.model.usercodes.split(",").filter(item => item !== ""),
        deptnames: this.model.deptnames.split(",").filter(item => item !== ""),
        deptcodes: this.model.deptcodes.split(",").filter(item => item !== ""),
        teamids: this.model.teamids.split(",").filter(item => item !== ""),
        teamnames: this.model.teamnames.split(",").filter(item => item !== ""),
        roleids: this.model.roleids.split(",").filter(item => item !== ""),
        rolenames: this.model.rolenames.split(",").filter(item => item !== ""),
        sharecodes: [],
        sharenames: []
      }
      if (this.model.sharecodes) {
        this.$set(this.userList, "sharenames", this.model.sharenames.split(",").filter(item => item !== ""))
        this.$set(this.userList, "sharecodes", this.model.sharecodes.split(",").filter(item => item !== ""))
      }
    },
    openRefDialog() {
      if (this.disabled) {
        return
      }
      // 调用ref的打开选人组件弹窗事件
      this.$refs.refUser.openRefDialog()
      this.$nextTick(() => {
        // 重新请求群组
        this.$refs.refUser.loadGroup()
      })
    },
    /** 打开人员选择框 */
    openMulitUser() {
      this.visible = true
    },
    /** 单个移除人员 */
    removeUser(type, index) {
      if (type === "user") {
        this.userList.usernames.splice(index, 1)
        this.model.usernames = this.userList.usernames.join(",")
        this.userList.usercodes.splice(index, 1)
        this.model.usercodes = this.userList.usercodes.join(",")
      } else if (type === "dept") {
        this.userList.deptnames.splice(index, 1)
        this.model.deptnames = this.userList.deptnames.join(",")
        this.userList.deptcodes.splice(index, 1)
        this.model.deptcodes = this.userList.deptcodes.join(",")
      } else if (type === "team") {
        this.userList.teamnames.splice(index, 1)
        this.model.teamnames = this.userList.teamnames.join(",")
        this.userList.teamids.splice(index, 1)
        this.model.teamids = this.userList.teamids.join(",")
      } else if (type === "role") {
        this.userList.rolenames.splice(index, 1)
        this.model.rolenames = this.userList.rolenames.join(",")
        this.userList.roleids.splice(index, 1)
        this.model.roleids = this.userList.roleids.join(",")
      } else if (type === "share") {
        this.userList.sharenames.splice(index, 1)
        this.model.sharenames = this.userList.sharenames.join(",")
        this.userList.sharecodes.splice(index, 1)
        this.model.sharecodes = this.userList.sharecodes.join(",")
      }
      this.$emit("input", JSON.parse(JSON.stringify(this.model)))
    },
    /** 选择确认 */
    doSubmitEdit() {
      if (this.displayShare) {
        this.model.sharecodes = this.shareCodeList.join(",")
        this.model.sharenames = ""
        this.shareList.forEach(m => {
          if (this.shareCodeList.findIndex(n => n === m.sourceusercodes) > -1) {
            this.model.sharenames += "," + m.sourceusernames
          }
        })
        if (this.model.sharenames.length > 0) {
          this.model.sharenames = this.model.sharenames.substring(1)
        }
      }
      this.$emit("input", JSON.parse(JSON.stringify(this.model)))
      this.formatUserList()
      this.$emit("confirm", this.model)
      this.visible = false
    },
    doCancelEdit() {
      this.visible = false
    },
    close() {},
    // 显示人员对话框
    showUsers() {
      this.$refs.usersRef.queryParam = this.model
      this.$refs.usersRef.visible = true
      this.$refs.usersRef.doQuery()
    }
  },
  watch: {
    /** 传输变换 */
    value: {
      handler(n, o) {
        this.open()
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style scoped lang="scss">
.tag-container {
  .el-tag {
    margin-right: 5px;
  }
}
</style>
